<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择资源</title>
    <link rel="stylesheet" href="less/resource.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <header class="resource-header">
        <a href="javascript:void(0)" class="header-return"><span></span></a>
        <span>选择资源</span>
    </header>
    <section class="resource-section">
        <!-- 套餐日期出发人数以及价格 -->
        <div class="section-package-text">
            <div class="text">
                <h3>三亚5日4晚半自助游套餐</h3>
                <p>出发日期：2017-9-10</p>
                <p>出行人数：3 成人</p>
            </div>
            <div class="price">
                <p><span>¥</span>6512</p>
                <p>总额明细></p>
            </div>
        </div>
        <!-- 地点 （出发地目的地信息） -->
        <div class="section-place">
            <div class="place-origin-destination">
                <div class="origin">
                    <p>三亚</p>
                    <p>凤凰国际机场</p>
                    <p>6:30</p>
                </div>
                <div class="destination">
                    <p>北京</p>
                    <p>首都国际机场 </p>
                    <p>10:40</p>
                </div>
            </div>
            <div class="place-time-date">
                <ul>
                    <li>
                        <span>日期</span>
                        2017-9-10
                        <span>星期</span>
                        五
                    </li>
                    <li><span>时间</span>
                        6:30
                        <span>am
                    </li>
                    <li><span>航班</span>中国国航CA1353 </li>
                    <li><span>舱位</span>经济舱</li>
                    <li><span>飞行时长</span>约5小时20分钟</li>
                    <li><span>出行人数</span>3人</li>
                    <li class="endorse"><a href="">改签/预订限制></a></li>
                    <li><a href="" class="re-election">重选航班></a></li>
                </ul>

            </div>
        </div>
        <div class="section-place">
            <div class="place-origin-destination">
                <div class="origin">
                    <p>北京</p>
                    <p>凤凰国际机场 </p>
                    <p>17:10</p>
                </div>
                <div class="destination">
                    <p>三亚</p>
                    <p>首都国际机场</p>
                    <p>22:33</p>
                </div>
            </div>
            <div class="place-time-date">
                <ul>
                    <li>
                        日期
                        <span>日期</span>
                        2017-9-16
                        <span>星期</span>
                        六
                    </li>
                    <li>
                        <span>时间</span>
                        17:10
                        <span>pm
                    </li>
                    <li><span>航班</span>大新华航空CN7180</li>
                    <li><span>舱位</span>经济舱</li>
                    <li><span>飞行时长</span>约5小时20分钟</li>
                    <li><span>出行人数</span>2人</li>
                    <li class="endorse"><a href="">改签/预订限制></a></li>
                    <li><a href="" class="re-election">重选航班></a></li>
                </ul>

            </div>
        </div>
        <!-- 优惠卷 -->
        <div class="section-coupons">
            <div class="coupons-one coupons">
                <div class="coupons-left">
                    <p>800<span>元</span></p>
                    <p>错峰大促</p>
                </div>
                <div class=coupons-right>
                    <div class="text">
                        <p>2成人起订</p>
                        <p>每单立减800元！</p>
                    </div>
                    <div class="number">
                        <a href="javascript:void(0)" class="reduction">-</a>
                        <span class="num">1</span>
                        <a href="javascript:void(0)" class="add">+</a>
                    </div>
                </div>
            </div>
            <div class="coupons-two coupons">
                <div class="coupons-left">
                    <p>168<span>元</span></p>
                    <p>餐标升级</p>
                </div>
                <div class="coupons-right">
                    <div class="text">
                        <p>+0元/人 免费升级</p>
                        <p>价值168元团餐！</p>
                    </div>
                    <div class="number">
                        <a href="javascript:void(0)" class="reduction">-</a>
                        <span class="num">1</span>
                        <a href="javascript:void(0)" class="add">+</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 附加额外费用账单 -->
        <div class="section-other">
            <div class="other-title">附加额外费用账单</div>
            <div class="options-content">
                <div class="options-one options">
                    <h3>单房差</h3>
                    <div class="number">
                        <a href="javascript:void(0)" class="reduction">-</a>
                        <span class="num">1</span>
                        <a href="javascript:void(0)" class="add">+</a>
                    </div>
                    <p class="n-price"><span>¥520</span>/人</p>
                </div>
                <div class="options-two options">
                    <h3>超值换购水上乐园成人门票</h3>
                    <div class="number">
                        <a href="javascript:void(0)" class="reduction">-</a>
                        <span class="num">1</span>
                        <a href="javascript:void(0)" class="add">+</a>
                    </div>
                    <p class="n-price"><span>¥50</span>/人</p>
                </div>
                <div class="options-three options">
                    <h3>超值换购天涯海角门票</h3>
                    <div class="number">
                        <a href="javascript:void(0)" class="reduction">-</a>
                        <span class="num">1</span>
                        <a href="javascript:void(0)" class="add">+</a>
                    </div>
                    <p class="n-price"><span>¥36</span>/人</p>
                </div>
            </div>
            <div class="other-insurance">
                <div class="insurance-title">
                    <p class="font-one">意外保险</p>
                    <p class="font-two">保险价格均为参考价，最终会以预订人真实年龄重新计算。</p>
                </div>
                <div class="insurance-content">
                    <div>
                        <span class="select-box select"></span>
                        <p class="font-one">平安i旅行境内长线保险 经典型 最高赔偿3000元</p>
                        <p class="font-one price"><span>¥120</span>2份</p>
                        <p class="font-two">请您付款后24小时内提供出行人证件信息，否则将自动为您退订此保险。</p>
                    </div>
                    <div>
                        <span class="select-box"></span>
                        <p class="font-one">平安i旅行境内长线保险 尊贵型 含航意险140万元</p>
                        <p class="font-one price"><span>¥154</span>2份</p>
                    </div>
                </div>
                <a href="" class="re-election-btn">重选保险></a>
            </div>
        </div>
    </section>
    <footer class="footer-resource"><a href="fill.html"> 下一步，填写订单</a></footer>
</body>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/flexible.js"></script>
<script src="js/resource.js"></script>

</html>